<template>
  <el-container>
    <div style="
        background-color: #fff;
        margin: 20px 0;
        box-shadow: 10px 10px 18px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
      " class="search">
      <el-row style="margin: 1% auto; font-size: 20px; text-align: center">综合查询</el-row>
      <!-- 头部的查询输入框 -->
      <el-form :model="temp_bussi" ref="temp_bussi" :inline="true" style="margin: 1% auto; text-align: center"
        label-width="200px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="业务编号" prop="applyCode">
              <el-input v-model="temp_bussi.applyCode"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="申请人" prop="name">
              <el-input v-model="temp_bussi.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="证件号" prop="idCard">
              <el-input v-model="temp_bussi.idCard"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8" v-if="townState">
            <el-form-item label="乡镇街道" prop="townCode">
              <el-select v-model="temp_bussi.townCode" placeholder="请选择乡镇街道" style="width: 100%" @change="townChange">
                <el-option label="请选择乡镇街道" value></el-option>
                <el-option v-for="item in temp_bussi.townList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-else>
            <el-form-item label="宅基地编号" prop="approvalBookId">
              <el-input v-model="temp_bussi.approvalBookId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="村组社区" prop="villageCode">
              <el-select v-model="temp_bussi.villageCode" placeholder="请选择村组社区">
                <el-option label="请选择村组社区" value></el-option>
                <el-option v-for="item in temp_bussi.villageList" :key="item.code" :label="item.name"
                  :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="节点" prop="state">
              <el-select v-model="temp_bussi.state" placeholder="请选择节点">
                <el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <!-- <el-col :span="8">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker prefix-icon="null" type="date" placeholder="开始日期" v-model="temp_bussi.startDate"
                value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" @change="startTimeChang"
                style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束日期" prop="finishDate">
              <el-date-picker prefix-icon="null" type="date" placeholder="结束日期" v-model="temp_bussi.finishDate"
                value-format="yyyy-MM-dd" :picker-options="pickerOptionsOver" @change="endTimeChang"
                style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="8" v-if="townState">
            <el-form-item label="办件状态" prop="maxTime">
              <el-select v-model="temp_bussi.maxTime" placeholder="请选择办件状态">
                <el-option v-for="item in temp_bussi.maxTimeList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="townState">
            <el-form-item label="建房类别" prop="buildingType">
              <el-select v-model="temp_bussi.buildingType" placeholder="请选择建房类别">
                <el-option v-for="item in temp_bussi.buildingTypeList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="townState">
            <el-form-item label="宅基地编号" prop="approvalBookId">
              <el-input v-model="temp_bussi.approvalBookId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('temp_bussi')">搜索</el-button>
          <el-button @click="resetForm('temp_bussi')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card style="margin-top:10px width:100%">

      <div style="width: 100%; background: white">
        <el-button type="primary" @click="exportToExcel('temp_bussi')" style="margin-bottom: 20px">导出申请受理台账
        </el-button>

        <el-button type="primary" @click="exportFinashExcel('temp_bussi')" style="margin-bottom: 20px">导出已归档台账
        </el-button>

        <el-button type="primary" @click="exportMdb('temp_bussi')" style="margin-bottom: 20px">导出mdb</el-button>
        <el-button type="primary" @click="exportShape('temp_bussi')" style="margin-bottom: 20px">导出shape</el-button>
      </div>
      <el-table @row-dblclick="SearchPro" v-loading="tableLoding" :data="tempTableData.data" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column prop="applyCode" label="业务编号" align="center"></el-table-column>
        <el-table-column prop="name" label="申请人" width="100" align="center"></el-table-column>
        <el-table-column prop="idCard" label="证件号" align="center"></el-table-column>
        <el-table-column prop="townName" label="乡镇街道" align="center"></el-table-column>
        <el-table-column prop="villageName" label="村组社区" align="center"></el-table-column>
        <el-table-column prop="lastTime" label="提交时间" sortable align="center"></el-table-column>
        <el-table-column prop="state" label="节点" align="center" :formatter="showChangeData"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tempTableData.currentPage" :page-sizes="[5, 10, 15, 20]"
          :page-size="tempTableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="tempTableData.total"></el-pagination>
      </div>

    </el-card>
    <el-footer>
    </el-footer>
  </el-container>
</template>

<script>
  import {
    queryAllListApi,
    exportMdbApi,
    exportShapeApi
  } from "@/api/queryApi";
  import store from "@/vuex/store";
  import config from "@/config/config";
  import {
    // eslint-disable-next-line no-unused-vars
    getAddressList,
    getChildrenAddress,
    queryTownCodeByVillageCodeApi,
    queryVillageListByVillageCodeApi
  } from "@/api/addressDictionary";
  export default {
    data() {
      return {
        townState: true,
        currentCode: store.getters.currentCode,
        uid: store.getters.uid,
        states: [{
          value: 3,
          label: '规划许可'
        }, {
          value: 4,
          label: '施工管理'
        }, {
          value: 5,
          label: '竣工验收'
        }, {
          value: 6,
          label: '业务归档'
        }],
        temp_bussi: {
          applyCode: "",
          idCard: "",
          townList: [{
            name: "",
            code: ""
          }],
          villageList: [{
            name: "",
            code: ""
          }],
          name: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
          townCode: "",
          villageCode: "",
          state: "",
          startDate: "",
          finishDate: "",
          maxTime: null,
          maxTimeList: [{
            value: 1,
            label: '办件中'
          }, {
            value: 2,
            label: '已完成'
          }, {
            value: -1,
            label: '已超时'
          }],
          buildingType: null,
          buildingTypeList: [{
            value: '1',
            label: '改建'
          }, {
            value: '2',
            label: '扩建'
          }, {
            value: '3',
            label: '新建'
          }],
        },
        pickerOptionsStart: {
          disabledDate(time) {
            return time.getTime() < 1488297600000 || time.getTime() >= Date.now();
          },
        },
        pickerOptionsOver: {
          disabledDate(time) {
            return time.getTime() < 1488297600000 || time.getTime() >= Date.now();
          },
        },
        tempTableData: {
          //表格data
          data: [{
            name: "",
            id: "",
            idcard: "",
            address: "",
            czsq: "",
            state: "",
          }, ],
          xzjd: "",
          czsq: "",
          state: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0,
        },
        tableLoding: false, //表格加载
        changeRow: [],
        formData: {
          appKey: "",
          appFlag: 2,
          token: store.getters.token,
          versionCode: 0,
          param: "",
        },
        address: [],
      };
    },
    created: function () {
      this.showTown();
      getChildrenAddress(this.currentCode).then((townList) => {
        if (this.currentCode.length > 9) {
          this.temp_bussi.townList = townList.data.data;
        } else {
          this.temp_bussi.villageList = townList.data.data;
        }
        this.getSearchDate();
      });

    },
    methods: {

      //从其他页面来的
      getSearchDate() {
        if (this.$route.query.code) {
          //通过townCode 或者 villageCode去查询
          // 5001140000 黔江区 10位
          // 500114001  某某镇街  9位
          // 500114109202 某某村组 12位
          //获取路由过来的code, 可能是townCode, 可能是villageCode
          let formOtherCode = this.$route.query.code;
          //如果是townCode, 就直接查询
          if (formOtherCode.length === 9) {
            this.temp_bussi.townCode = formOtherCode;
          }

          //如果是villageCode，先查询townCode, 在查询villageList
          if (formOtherCode.length === 12) {
            //先通过villageCode查询townCode
            queryTownCodeByVillageCodeApi(formOtherCode).then(resultCode => {
              this.temp_bussi.townCode = resultCode.data.data;
              this.temp_bussi.villageCode = formOtherCode;
              //通过villageCode查询villageList
              queryVillageListByVillageCodeApi(formOtherCode).then(villages => {
                this.temp_bussi.villageList = villages.data.data;
              })
            })
          }
        }
        if (this.$route.query.maxTime) {
          this.temp_bussi.maxTime = this.$route.query.maxTime
        }
        if (this.$route.query.state) {
          this.temp_bussi.state = this.$route.query.state;
        }
        if (this.$route.query.buildingType) {
          this.temp_bussi.buildingType = this.$route.query.buildingType;
        }
        this.querySearDateService();
      },

      //为了解决js异步执行，我就这么搞了一下
      querySearDateService() {
        queryAllListApi(this.temp_bussi).then((response) => {
            this.tempTableData.data = response.data.data.items;
            this.tempTableData.total = response.data.data.total;
            this.tableLoding = false;
            this.$message({
              showClose: true,
              message: "查询成功",
              type: "success",
            });
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: error.data.respondMessage,
              type: "error",
            });
          });
      },

      exportShape() {
        const loading = this.$loading({
          //打开加载等待效果
          lock: true,
          text: "正在导出，请稍等...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        exportShapeApi(this.temp_bussi);
        loading.close();
      },
      dateFilter: function (input) {
        var d = new Date(input);
        var year = d.getFullYear();
        var month =
          d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
        var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
        return year + "-" + month + "-" + day;
      },
      startTimeChang(val) {
        let startDate = this.dateFilter(val);
        this.temp_bussi.startDate = startDate;
      },
      endTimeChang(val) {
        let finishDate = this.dateFilter(val);
        this.temp_bussi.finishDate = finishDate;
      },
      townChange(index) {
        if (this.temp_bussi.townCode) {
          getChildrenAddress(this.temp_bussi.townCode).then((villageList) => {
            this.temp_bussi.villageList = villageList.data.data;
          });
        }
      },
      queryAllList() {
        this.tableLoding = true;
        queryAllListApi(this.temp_bussi)
          .then((response) => {
            this.tempTableData.data = response.data.data.items;
            this.tempTableData.total = response.data.data.total;
            this.tableLoding = false;
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: error,
              type: "error",
            });
            this.tableLoding = false;
          });
      },
      SearchPro(row) {
        row.type = this.type;
        if (row.state == "1") {
          row.active = 0;
          switch (this.type) {
            case "1":
              row.typeName = "新建录入";
              this.$router.push({
                path: "./newBuild",
                query: row,
              });
              break;
            case "2":
              row.typeName = "扩建录入";
              this.$router.push({
                path: "./newBuild",
                query: row,
              });
              break;
            case "3":
              row.typeName = "迁建录入";
              this.$router.push({
                path: "./newBuild",
                query: row,
              });
              break;
            case "4":
              row.typeName = "改建录入";
              this.$router.push({
                path: "./newBuild",
                query: row,
              });
              break;
            case "5":
              row.typeName = "加层录入";
              this.$router.push({
                path: "./newBuild",
                query: row,
              });
              break;
            case "6":
              row.typeName = "改扩建录入";
              this.$router.push({
                path: "./newBuild",
                query: row,
              });
              break;
            default:
              this.$message.error("请选择业务类型");
          }
        } else {
          row.active = row.state - 2;
          this.$router.push({
            path: "./details",
            query: row,
          });
        }
      },
      //提交搜索
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            queryAllListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success",
                });
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      //导出excel 导出excel 导出excel  config.baseUrl +"query/exportToExcel.do?uid=" + this.uid +"&xzjd=" +this.currentCode
      exportToExcel(formName) {
        window.open(
          config.baseUrl +
          "query/exportToExcel.do?uid=" +
          this.uid +
          "&villageCode=" +
          this.temp_bussi.villageCode +
          "&townCode=" +
          this.temp_bussi.townCode +
          "&applyCode=" +
          this.temp_bussi.applyCode +
          "&name=" +
          this.temp_bussi.name +
          "&idCard=" +
          this.temp_bussi.idCard +
          "&state=" +
          this.temp_bussi.state
        );
      },
      exportFinashExcel() {
        window.open(
          config.baseUrl +
          "query/exportFinashExcel.do?uid=" +
          this.uid +
          "&villageCode=" +
          this.temp_bussi.villageCode +
          "&townCode=" +
          this.temp_bussi.townCode +
          "&applyCode=" +
          this.temp_bussi.applyCode +
          "&name=" +
          this.temp_bussi.name +
          "&idCard=" +
          this.temp_bussi.idCard
        );
      },
      exportMdb() {
        var exportMdbVo = {
          applyCode: this.temp_bussi.applyCode,
          name: this.temp_bussi.name,
          idCard: this.temp_bussi.idCard,
          villageCode: this.temp_bussi.villageCode,
          townCode: this.temp_bussi.townCode,
        };
        exportMdbApi(exportMdbVo);
        this.$message({
          showClose: true,
          message: "下载成功",
          type: "success",
        });
      },
      // 清空表单选项
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.temp_bussi.startDate = "";
        this.temp_bussi.finishDate = "";
        this.$refs[formName].validate((valid) => {
          if (valid) {
            queryAllListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "重置成功",
                  type: "success",
                });
                //this.resetForm(formName);
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      changePageSize(val) {
        this.temp_bussi.pageSize = val;

        this.tempTableData.state = this.queryAllList();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      handleSelectionChange(val) {
        this.changeRow = val;
      },
      selectable(row, index) {
        if (row.show == 0) {
          return false;
        } else {
          return true;
        }
      },

      //状态
      showChangeData: function (row, column) {
        return row.state == "2" ?
          "初审" :
          row.state == "3" ?
          "规划许可" :
          row.state == "4" ?
          "施工管理" :
          row.state == "5" ?
          "竣工验收" :
          row.state == "6" ?
          "归档" :
          "未知";
      },
      //控制显示乡镇街道显示状态
      showTown() {
        if (this.currentCode.length > 9) {
          this.townState = true;
        } else {
          this.townState = false;
          this.temp_bussi.townCode = this.currentCode;
        }
      },
    },
  };
</script>

<style>
  .headDiv div {
    display: inline-block;
  }

  .el-input--suffix .el-input__inner {
    font-size: 14px;
    padding-right: 15px !important;
  }

  .el-form--inline .el-form-item__label {
    font-size: 14px !important;
  }
</style>